<template>
  <view class="index-page">
    <!-- 顶部导航+天气模块 -->
    <TopNav />
    <WeatherBar />
    <UpdateTip />
    
    <view class="page-title">热点新闻列表（多样式）</view>
    
    <!-- 新闻卡片循环（添加点击跳转） -->
    <NewsCard 
      v-for="(news, index) in hotNewsList" 
      :key="news.id || (news.title + index)" 
      v-bind="news" 
      @click="toNewsDetail(news.id || index)"
    />
    
    <!-- 引入自定义tabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref } from 'vue';
import TopNav from '@/components/TopNav.vue';
import WeatherBar from '@/components/WeatherBar.vue';
import UpdateTip from '@/components/UpdateTip.vue';
import NewsCard from '@/components/NewsCard.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 热点新闻数据（补充id字段，统一格式）
const hotNewsList = ref([
  { 
    id: 1,
    title: "2020，我们温暖的记忆", 
    source: "新闻联播", 
    time: "2025.10.29", 
    comment: 405, 
    isTop: true,
    commentCount: 405
  },
  { 
    id: 2,
    title: "森林大县57年无大火是怎么做到的", 
    source: "光明网", 
    time: "2025.10.28", 
    comment: 234, 
    isTop: true,
    commentCount: 234
  },
  { 
    id: 3,
    title: "几年近疯狂，涉案金额超3亿，一个“背包客”牵出全国跨省“倒烟”大案", 
    source: "大河网", 
    time: "2025.10.27", 
    comment: 38, 
    img: "/static/news1.jpg",
    commentCount: 38
  }
]);

// 跳转新闻详情页
const toNewsDetail = (newsId) => {
  uni.navigateTo({ url: `/pages/news-detail/news-detail?id=${newsId}` });
};
</script>

<style scoped>
.index-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 60px; /* 为tabBar留出空间 */
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
}
</style>